---
title: "User"
description: "Display user information with avatar and name."
---

import {userContent} from "@/content/components/user";

# User

Display user information with avatar and name.

<ComponentLinks component="user" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add user",
    npm: "npm install @heroui/user",
    yarn: "yarn add @heroui/user",
    pnpm: "pnpm add @heroui/user",
    bun: "bun add @heroui/user"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {User} from "@heroui/react";',
    individual: 'import {User} from "@heroui/user";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={userContent.usage} />

> **Note**: See the [Avatar](/docs/components/avatar) component for more details about `avatarProps`.

### Link Description

<CodeDemo title="Link Description" files={userContent.linkDescription} />

## Slots

- **base**: The base slot of the user, it is the main container.
- **wrapper**: The name and description wrapper.
- **name**: The name of the user.
- **description**: The description of the user.

<Spacer y={4}/>  

## Data Attributes

`User` has the following attributes on the `root` element only when `isFocusable` is `true`:

- **data-focus**:
  When the user is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
- **data-focus-visible**:
  When the user is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)

<Spacer y={4}/>  

## API

### User Props

<APITable
  data={[
    {
      attribute: "name",
      type: "string",
      description: "The name of the user.",
      default: "-"
    },
    {
      attribute: "description", 
      type: "ReactNode",
      description: "The description component.",
      default: "-"
    },
    {
      attribute: "isFocusable",
      type: "boolean", 
      description: "Whether the user is focusable. This is useful when using `Dropdown` or similar components.",
      default: "false"
    },
    {
      attribute: "avatarProps",
      type: "AvatarProps",
      description: "The avatar component props. The `name` is passed by default.",
      default: "-"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<\"base\" | \"wrapper\" | \"name\" | \"description\", string>>",
      description: "Allows to set custom class names for the user slots.",
      default: "-"
    }
  ]}
/>
